<template>
<view class="container">
    <img class="head" src="@/static/head.png" alt="head">
    <img class="head2" v-bind:src="imagePath" alt="Image">
    <text class="account">{{username}}</text>
    <img class="bac1" src="@/static/bac1.png" alt="bac1">
    <img class="farm1" src="@/static/farm1.jpg" alt="bac1">
    <view class="tool">
    <img v-for="(image, index) in images" :key="index" class="image-item" :src="image" @click="navigateToNewPage(index)" alt="Image">
  </view>
   <img class="cloud" src="@/static/cloud2.png" alt="cloud">
  <img class="tree" src="@/static/tree.png" alt="tree">
  <text class="answer" @click="answer">答题闯关</text>
   <view class="popup-mask" v-show="popupVisible.popup1" @click="hidePopup('popup1')"></view>
  <view class="popup-mask" v-show="popupVisible.popup2" @click="hidePopup('popup2')"></view>
  <img class="npc1" src="@/static/npc1.png" mode="aspectFit" @click="showPopup('popup1')" alt="npc1">
  <img class="npc2" src="@/static/npc2.jpg" mode="aspectFit" @click="showPopup('popup2')" alt="npc2">
  <view class="popup" v-show="popupVisible.popup1" @click="hidePopup('popup1')">
    <image src="@/static/brown_npc.jpg" mode="aspectFit"></image>
  </view>
    <view class="popup" v-show="popupVisible.popup2" @click="hidePopup('popup2')">
      <image src="@/static/pink_npc.jpg" mode="aspectFit"></image>
    </view>
    <view class="popup3" v-show="popup3" @click="hidePopup('popup3')">
      <image class="cloud2" src="@/static/cloud2.png" mode="aspectFit"></image>
      <text class="water" v-show="water">需要浇水!!!</text>
      <text class="grass" v-show="grass">需要除草!!!</text>
    </view>
    <img v-for="index in 4" class="land" :style="{ top: `${(index - 1) * 20 + 100}px`,left: `${(index - 1) * 60 + 220}px` }"  :src="showOriginalImage[index]" alt="land" @click="toggleImage(index)">
    <view class="popup-mask" v-if="popupVisible.popup4"></view>
    <div class="choose" v-if="chara">
       <div v-if="chara" v-for="(character, index) in characters" :key="index">
      <img :src="character.avatar" @click="selectCharacter(index)" />
      <text>{{ character.introduction }}</text>
    </div>
    </div>
    <div class="chara" v-if="chara">
    <button class="character2">选择土地管家</button>
     <img class="bcloud" src="@/static/cloud.png" alt="bcloud">
     <button class="character" @click="confirmCharacter">确定</button>
     </div>
     <div class="selected" v-if="selectedCharacter">
      <img :src="selectedCharacter.avatar" />
      <text>{{ selectedCharacter.introduction }}</text>
    </div>
  </view>
</template>

<script>
export default {
 data() {
    return {
      flowers: [
        { name: '穿心莲', image: '/static/chuan.png', price: 3 },
        { name: '葛根', image: '/static/ge.png', price: 8 },
        { name: '藿香', image: '/static/huo.png', price: 10 },
        { name: '罗汉果', image: '/static/luo.png',price:8},
        { name: '南非叶', image: '/static/nan.png',price:10},
        { name: '青葙子', image: '/static/qing.png',price:3},
      ],
      images: [
        "/static/seed.png",
        "/static/water3.png",
        "/static/dele_grass.png",
        "/static/bag.png"
      ],
       popupVisible: {
        popup1: false,
        popup2: false,
        popup4:true
      },
      username:'',
     showOriginalImage: ["/static/land.png","/static/land.png","/static/land.png","/static/land.png"],
      currentImageIndex: null,
      popup3:false,
      water:false,
      grass:false,
      imageUpdated: false,
      characters: [
        {
          avatar: '/static/name_zhang.jpg',
          introduction: "姓名：张成功\n" +"土地所在地：甘肃省庆阳市环县曲子镇\n" +
                "种植种类：枸杞、甘草、刺五加；\n" +
                "土地亩数：10亩\n" +
                "管家费：100元/亩\n"
        },
        {
          avatar: '/static/name_guo.jpg',
          introduction: "姓名：张国强\n" +
                "土地所在地：河南省禹州市鸿畅镇老君堂村\n" +
                "种植类型：金银花、艾草\n" +
                "土地亩数：7亩\n" +
                "管家费：100/亩\n"
        },
        {
          avatar: '/static/name_geng.jpg',
          introduction: "姓名：耿川\n" +
                "土地所在地：甘肃省庆阳市环县曲子镇\n" +
                "种植种类：枸杞、甘草、防风、丹参\n" +
                "土地亩数：14亩\n" +
                "管家费：120元/亩\n"
        }
      ],
      selectedCharacter: null,
      chara:true
    };
  },
  created() {
  uni.$on('updateImage', this.updateImage);
  uni.$on('pop3show',this.pop3show);
},
  methods: {
    selectCharacter(index) {
      this.selectedCharacter = this.characters[index];
    },
    confirmCharacter() {
      if (!this.selectedCharacter) {
        alert('请选择一个人物');
        return;
      }
      // 在这里执行确认人物的逻辑，比如保存到数据库或者进行其他操作
      this.chara = false;
      this.popupVisible.popup4 = false;
      console.log('选择的人物:', this.selectedCharacter);
    },
  updateImage(index, imagePath) {
    // 更新对应索引的图片路径
    setTimeout(() => {
        this.$set(this.showOriginalImage, this.currentImageIndex, imagePath);
    }, 10000);
    console.log('imagePath', imagePath);
    this.imageUpdated = true;
},
  pop3show(){
    setTimeout(()=>{
      this.popup3 = true
      this.water = true
      this.grass = false
    },5000)
  },
       toggleImage(index, remainingQuantity) {
    if (!this.imageUpdated) {
        this.currentImageIndex = index;
        uni.navigateTo({
            url: '/pages/bag/bag'
        });
        // 两秒后更改图片
        setTimeout(() => {
            this.$set(this.showOriginalImage, index, '/static/seed.png'); // 将seed.png替换为ge.png
        }, 2000);
    }
    this.$set(this.showOriginalImage, index, '/static/land.png');
    this.imageUpdated = false;
},
    showPopup(popupName) {
      this.popupVisible[popupName] = true;
    },
    hidePopup(popupName) {
      this.popupVisible[popupName] = false;
    },
     navigateToNewPage(index) {
      if (index === 0) {
         uni.navigateTo({
          url: '/pages/buy/buy'
        });
      }else if(index === 1){
        this.water = false
        this.grass = true
      }else if(index === 2){
        this.popup3 = false
      }
      else if(index === 3){
          uni.navigateTo({
          url: '/pages/bag/bag'
        });
      }
    },
    answer(){
         uni.navigateTo({
          url: '/pages/answer/answer'
        });
    },
     navigateToAnotherPage() {
      // 使用uni-app提供的页面跳转方法
      uni.navigateTo({
        url: '/pages/bag/bag' 
      });
    }
  },
    onLoad(options) {
    if (options.username) {
      this.username = options.username;
    }
  },
}
</script>

<style scoped>
.container{
    display: flex;
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.farm1{
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 容器宽度 */
    height: 100%; /* 容器高度 */
}
.bac1{
    z-index: 1;
    position: absolute;
    top: -7px;
    left: 60px;
    width: 210px;
    height: 50px;
}
.choose{
    z-index: 4;
    position: absolute;
    display: flex;
    flex-direction: row;
    overflow-y: auto;
    top: 27px;
    left: 170px;
    width: 200px;
    height: 280px;
}
.selected{
  z-index: 2;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    left:2%;
    flex-direction: row;
    overflow-y: auto;
    top: 65%;
    width: 150px;
    height:100px;
}
.selected img{
  height: 50px;
  width: 80px;
}
.character{
  z-index: 4;
  position: absolute;
top: 85%;
left:60%;
  height: 40px;
  width: 87px;
  background-color: transparent; /* 背景色透明 */
  border: 4px solid #0e5059;
  border-radius: 10px;
  line-height: 20px; /* 文本垂直居中 */
  font-size: 25px;
}
.character2{
  z-index: 4;
  position: absolute;
  top: 10%;
  height: 40px;
  width: 180px;
  left: 32%;
  background-color: transparent; /* 背景色透明 */
  border: 4px solid #0e5059;
  border-radius: 10px;
  line-height: 30px; /* 文本垂直居中 */
  font-size: 22px;
}
.bcloud{
   z-index: 3;
    position: absolute;
    left: 70px;
    width: 400px;
    top: -9%;
    height: 340px;
}
.choose img{
  height: 80px;
  width: 200px;
  margin-top: 35px;
}
.head{
    z-index: 2;
    position: absolute;
    top: -7px;
    left: 60px;
    width: 40px;
    height: 40px;
}

.account{
     z-index: 2;
    position: absolute;
    left: 100px;
    width: 140px;
    height: 70px;
    font-size: 30px;
}
.tool{
    z-index: 2;
    position: absolute;
    left: 290px;
}
.cloud{
    z-index: 1;
    position: absolute;
    width: 55%;
    height: 60px;
    margin-left: 270px;
}
.seed{
  position: absolute;
  z-index: 2;
  height: 20%;
  width: 10%;
}
.image-item{
    z-index: 2;
    position: relative;
    width: 60px;
    height: 60px;
}
.tree{
    z-index: 2;
    position: absolute;
    height: 120px;
    width: 122px;
    top: 35px;
}
.answer{
    z-index: 3;
    position: absolute;
    font-size: 30px;
    margin-top: 50px;
    font-weight:1000;
     text-shadow: 0 0 6px black; /* 添加阴影效果增强字体粗细感 */
}
.npc1{
    z-index: 2;
    position: absolute;
    height: 100px;
    width: 60px;
    left: 40%;
    top: 35px;
}
.npc2{
     z-index: 2;
    position: absolute;
    height: 100px;
    width: 60px;
    left: 80%;
    top: 60%;
}
.popup {
  height: 100px;
  width: 100px;
  position: absolute;
  left: 170px;
  top: 70px;
  transform: translate(-50%, -50%);
  z-index: 4;

}
.popup-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明灰色背景 */
  z-index: 3; /* 比弹出框的层级低，但高于其他内容 */
}
.land{
    z-index: 2;
    position: absolute;
    height: 50px;
    width: 50px;
    margin-top: 3%;
    margin-left: 3%;
}
.land2{
    z-index: 2;
    position: absolute;
    height: 50px;
    width: 50px;
    margin-top: 5%;
    margin-left: 5%;
}
.land3{
    z-index: 2;
    position: absolute;
    height: 24px;
    width: 30px;
    margin-top: 75px;
    margin-left: 25px;
}
.popup3 {
  left: -20%;
  top: 80%;
  width: 50%;
  position: relative;
  z-index: 4;
}
.cloud2{
  height: 30%;
}
.water{
  position: relative;
  top: -70px;
  font-size: 30px;
  left: 30%;
}
.grass{
  position: relative;
  top: -70px;
  font-size: 30px;
  left: 30%;
}
</style>